import { Button, Drawer, Space, Timeline, TimelineItemProps } from "antd";
import { memo, useRef } from "react"
import { IBeefRiskType } from "./beef-risk";
import { useGetBeefStepByBeefId } from "../../../service/beef/beef-solve-service";
import styled from "@emotion/styled";
import { IUploadImgRefHandler } from "../../../components/upload-img";

/**
 * 流程状态
 */
export const status = [
    { id: 1, value: "申请" },
    { id: 2, value: "签收" },
    { id: 3, value: "指派人员处理" },
    { id: 4, value: "调解" },
    { id: 5, value: "确认" },
    { id: 6, value: "电话回访" },
    { id: 7, value: "退回流程" },
    { id: 8, value: "取消" },
    { id: 100, value: "推送到综治中心" }]

/**
 * 根据状态值获取到描述名称
 * @param val 状态
 * @returns 
 */
export const getStatusName = (val: number): string => {
    for (let i = 0; i < status.length; i++) {
        if (val === status[i].id) {
            return status[i].value
        }
    }
    return ''
}
const BeefSloveStepForm = ({ beefId, open, setOpen, refetch, ...props }: IBeefRiskType) => {

    console.log(beefId,'bao')
    
    //图片附件的引用
    const imageRef = useRef<IUploadImgRefHandler>();
    /**
     * !获取矛盾纠纷处理流程Hook
     */

    const { isLoading, data: dataSource } = useGetBeefStepByBeefId({ beefId: beefId || "708f7a930c9842f09c4819bcb8e655ae" });

    /**
     * 更新方法
     */
    const updateHandler = async () => {
        //设置图片
        // form.setFieldValue("imgUrls", imageRef.current?.getUrls());
        // const values = await form.getFieldsValue();
        // await updateMutation({ ...values, riskId: dataSource?.riskId, });
        // refetchCallBack();
        // setOpen(false);
        // form.resetFields();
        // imageRef.current?.rest();
    }

    /**
     * 保存方法
     */
    const saveHandler = async () => {
        //设置图片
        // form.setFieldValue("imgUrls", imageRef.current?.getUrls());
        // const isPass = await form.validateFields();
        // if (!isPass) {
        //     return
        // }
        // const values = form.getFieldsValue();
        // await addMutation({ beefId: beefId, ...values });
        // refetchCallBack();
        // setOpen(false);
        // form.resetFields();
        // imageRef.current?.rest();
    }

    const getTimelineItems = () => {
      console.log(dataSource,'123123')
      
        const arr: TimelineItemProps[] = [];
        dataSource?.map(data => {
            arr.push({
                children: (<TimeLineChildren key={data.beefId}>
                    <div className="base-info">
                        <Space style={{marginBottom: '1rem'}}>
                            <Button type={'primary'} size="small">{data.sysRoleName}</Button>
                            <span>{data.userName}</span>
                            <span> {getStatusName(data.beefLevel)}</span>
                            <span>{data.beefSolveCreateTime}</span>
                        </Space>
                    </div>
                    {
                        data.beefSolveStepDesp ? <div className="desp" style={{ color: "#666", fontWeight: 700, backgroundColor: "#ddd", padding: "16px 16px 16px 16px", borderRadius: '6px' }}>
                            {data.beefSolveStepDesp}
                        </div> : null
                    }
                    {
                        data.imgUrls?.map((url, index) => {
                            return <img className="img" src={'http://81.69.0.39:8889'+url} alt="" key={index} />
                        })
                    }
                </TimeLineChildren>)
            })
        })
        return arr;
    }

    return <Drawer title={"处理流程"} placement="right" width={'40rem'} closable={true} onClose={() => setOpen(false)} forceRender={true} open={open} footer={
        <>
            {
                beefId ? (
                    <Button onClick={() => { updateHandler(); }}>
                        修改
                    </Button>
                ) : (
                    <Button onClick={() => { saveHandler(); }}>
                        保存
                    </Button>
                )
            }
        </>
    }>
        <Timeline
            mode={"left"}
            items={getTimelineItems()}
        />
    </Drawer >
}



const TimeLineChildren = styled.div`

    .base-info {
        display: flex;
        >span {
            padding: 1rem;
        }
         >span::nth-of-type(1) {
            padding-left: 0;
        }
    }
    .img{
        height: 6rem;
        width: 6rem;
        padding: 0.6rem;
        border-radius: 6px;
        background-color:#f5f5f5;
        border: 1px solid #ccc;
        margin-top: 1rem;
        margin-right: 1rem;
    }
`

export default memo(BeefSloveStepForm)
